

import alertBg from "@/assets/image/alert-bg.png"
import iconClose from "@/assets/image/pop_icon_close.png"

export default function (point,data,closeMethod,submitMethod) {

const ComplexCustomOverlay = function(point, text){
    this._point = point;
    this._text = text;
}

ComplexCustomOverlay.prototype = new BMap.Overlay();

ComplexCustomOverlay.prototype.initialize = function(map){
    this._map = map;
    var div = this._div = document.createElement("div");
    div.style.position = "absolute";
    // div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
    div.style.zIndex == 999
    div.style.background = "#fff"
    div.style.background = `url(${alertBg})`
    div.style.backgroundSize = "100% 100%"
    div.style.height = "auto";
    div.style.width = "21.8vw"
    div.style.padding = "2.4vh"
    div.style.top = "300px";
    div.style.left = "50px";
    div.style.display = "flex";
    div.style.flexDirection = "column";

    var close = this._close = document.createElement("div");
    close.style.position = "absolute";
    close.style.width = "3.7vh";
    close.style.height = "3.7vh";
    close.style.background = `url(${iconClose})`
    close.style.backgroundSize = "100% 100%"
    close.style.top = "-30px"
    close.style.right = "-40px"
    close.style.zIndex = 1000
    div.appendChild(close);
    
    close.onclick = function () {
      closeMethod(data.data);
    }


    var title = this._title = document.createElement("div");
    title.style.width = "100%"
    title.style.color = "#fff"
    title.style.textAlign = "center"
    title.style.fontSize = "36px"
    title.style.fontWeight = 700
    title.style.textShadow = "0px 0px 6px #9BD2FB"
    var span = this._span = document.createElement("span");
    span.appendChild(document.createTextNode(this._text));      
    title.appendChild(span);
    div.appendChild(title)

    
    const stateArr = [
      {title:'登录中',value:0},
      {title:'在线',value:1},
      {title:'离线',value:2},
      {title:'报警',value:3},
    ]
    

    let rowData = data.data
    let stateIndex = stateArr.findIndex(item => item.value == rowData.is_online)

    let itemBoxList = [
      // {title:'设备编号:',value:rowData.cameraId},
      // {title:'点位类型:',value:`${rowData.typeTitle}治安监控`},
      // {title:'摄像机类型:',value:rowData.model},
      // {title:'设备厂商:',value:rowData.dev_producer},
      // {title:'组织名称:',value:rowData.org_name},
      // // {title:'使用人员:',value:rowData.userName},
      // {title:'安装地址:',value:rowData.place},
      // {title:'联网状态:',value:stateArr[stateIndex].title,color:"#30F8B9"},
    ]


    itemBoxList.forEach(item => {

      var itemBox = this._item_box = document.createElement("div");

      itemBox.style.width = "100%";
      itemBox.style.display = "flex"
      itemBox.style.fontSize = "28px"

      var itemTitle = this._item_title = document.createElement("div");
      itemTitle.style.width = "40%"
      itemTitle.style.textAlign = "center"
      itemTitle.style.marginTop = "3%"
      itemTitle.style.color = "#DFE6F4"
      itemTitle.appendChild(document.createTextNode(item.title))
      
      var itemContent = this._item_content = document.createElement("div");
      itemContent.style.width = "55%"
      itemContent.style.margin = "3% 0 0 5%"
      itemContent.style.color = "#FFFFFF"
      if(item.color != undefined){
        itemContent.style.color = item.color
      }

      itemContent.appendChild(document.createTextNode(item.value))
      
      itemBox.appendChild(itemTitle)
      itemBox.appendChild(itemContent)
      div.appendChild(itemBox)
    })

   

    
    var bottomBox = this._bottom_box = document.createElement("div");
    bottomBox.style.width = "100%"
    bottomBox.style.display = "flex"
    bottomBox.style.alignItems = "center"
    bottomBox.style.justifyContent = "center"
    var bottombutton = this._bottom_button = document.createElement("div");
    bottombutton.appendChild(document.createTextNode("实时画面"))
    bottombutton.style.textAlign = "center"
    bottombutton.style.width = "3.6vw"
    bottombutton.style.height = "3vh"
    bottombutton.style.cursor = "pointer"
    bottombutton.style.display = "flex"
    bottombutton.style.alignItems = "center"
    bottombutton.style.justifyContent = "center"
    bottombutton.style.margin = "1.4vh"
    bottombutton.style.boxShadow = "inset 0px 0px 15px 0px #A7D2FF"
    bottombutton.style.borderImage = "linear-gradient(90deg, rgba(223.125, 244.90625202655792, 255, 0), rgba(223.00000190734863, 245.00000059604645, 255, 1), rgba(223.00000190734863, 245.00000059604645, 255, 0)) 2 2;"
    bottombutton.style.border = "2px solid"
    bottombutton.style.background = " rgba(2,25,52,0.4)"
    bottombutton.style.fontSize = "30px"
    bottombutton.style.color = "#FFFFFF"
    bottombutton.onclick = function(){
      submitMethod(data.data)
    }

    bottomBox.appendChild(bottombutton)
    div.appendChild(bottomBox)
    
   
    // div.onmouseover = function(){
    //   this.style.backgroundColor = "#6BADCA";
    //   this.style.borderColor = "#0000ff";
    //   this.getElementsByTagName("span")[0].innerHTML = that._overText;
    //   arrow.style.backgroundPosition = "0px -20px";
    // }

    // div.onmouseout = function(){
    //   this.style.backgroundColor = "#EE5D5B";
    //   this.style.borderColor = "#BC3B3A";
    //   this.getElementsByTagName("span")[0].innerHTML = that._text;
    //   arrow.style.backgroundPosition = "0px 0px";
    // }

    map.getPanes().labelPane.appendChild(div);
    return div;
}

ComplexCustomOverlay.prototype.draw = function(){
    var map = this._map;
    var pixel = map.pointToOverlayPixel(this._point);
    this._div.style.left = pixel.x + 50 + "px"; //控制这个信息窗口针对标注物原点的偏移量，这也是前面div要设置样式position:absolute;
    this._div.style.top = pixel.y - 200 + "px";
}

        
return new ComplexCustomOverlay(point,data.title);

}